<template>
  <el-card class="l-box-card">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
    >
      <el-menu-item index="1" @click="progressingOrder(id)"
        >交易中</el-menu-item
      >
      <!-- 完成订单 取消订单 -->
      <!-- 单方取消订单会降低信誉分 -->
      <el-menu-item index="2" @click="recievedOrder(id)">已接单</el-menu-item>
      <!-- 完成订单 取消订单 -->
      <!-- 单方取消订单会降低信誉分 -->
      <el-menu-item index="3" @click="publishedOrder(id)">已发布</el-menu-item>
      <!-- 取消订单 修改订单 -->
      <el-menu-item index="4" @click="allOrder(id)">订单记录</el-menu-item>

      <!-- 删除订单 -->
    </el-menu>

    <!-- <el-card class="s-box-card">
      <span style="">乖乖小孩嗷嗷待哺！</span>
      <el-button type="primary" round justify="end">完成订单</el-button>
      <el-button type="danger" round justify="end">取消订单</el-button>
      <p>
        宝宝1周岁，大人要出差一天，想找一位资深月嫂看管一天（包括宝宝的三餐辅食）
      </p> -->
    <!-- 接单人头像，点击跳转个人页 -->
    <!-- </el-card> -->
    <el-card class="s-box-card" v-for="(item, index) in orderList" :key="index">
      <div class="condition">{{ getCondition(item.condition) }}</div>
      <div class="top">
        <div
          class="title"
          style="font-weight: bold"
          @click="redirectToPage(item.id)"
        >
          {{ item.title }}
        </div>
        <div class="Type">{{ item.type }}</div>
        <div class="price">{{ item.price + "¥" }}</div>
      </div>
      <p class="content">{{ item.description }}</p>
      <div class="divider"></div>

      <div class="bottom">
        <div class="owner">
          <el-avatar class="avatar" :src="getUserAvatar(item.customer_id)" />
          <div class="ownerId">
            {{ item.customer_id == id ? "我" : "ID:" + item.customer_id }}
          </div>
        </div>
        <div class="right">
          <el-button
            style="float: right; margin-right: 10px"
            type="primary"
            round
            justify="end"
            :disabled="item.status === 4"
            @click="handleButtonClick1(item.condition, item.id)"
          >
            {{ getButtonLabel1(item.condition) }}
          </el-button>
          <el-popover placement="top" :width="160">
            <h4>您确认吗</h4>
            <div style="text-align: right; margin: 0">
              <el-button
                size="small"
                type="primary"
                @click="handleButtonClick2(item.condition, item.id)"
                >确认</el-button
              >
            </div>

            <template #reference>
              <el-button
                style="float: right; margin-right: 10px"
                type="danger"
                round
                justify="end"
                :disabled="item.status === 4"
              >
                {{ getButtonLabel2(item.condition) }}
              </el-button>
            </template>
          </el-popover>
        </div>
      </div>
      <!-- 接单人头像，点击跳转个人页 -->
    </el-card>

    <el-dialog v-model="dialogTableVisible" title="评价">
      <el-input
        v-model="comment"
        :autosize="{ minRows: 3, maxRows: 4 }"
        type="textarea"
        placeholder="Please input"
      />

      <div class="rate_item">
        <span>信誉评分：</span>
        <el-rate
          v-model="value1"
          show-score
          text-color="#ff9900"
          score-template="{value} points"
          allow-half
        />
      </div>
      <div>
        <span>综合评分：</span>

        <el-rate
          v-model="value2"
          show-score
          text-color="#ff9900"
          score-template="{value} points"
          allow-half
        />
      </div>
      <div style="height: 10px" />

      <el-button round justify="center" @click="to"> 提交 </el-button>
    </el-dialog>
  </el-card>
</template>

<script>
import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      tmp: "",
      comment: "",
      value1: 0,
      value2: 0,
      dialogTableVisible: false,
      list: 0,
      visible: [],
      id: "",
      activeIndex: "1",
      orderList: [],
      user_data: [],
      // 未接单，已接单，worker说完成，已结束，已取消
      buttonLabels1: [
        "完成订单",
        "完成订单",
        "完成订单",
        "删除记录",
        "删除记录",
      ],
      buttonLabels2: [
        "取消订单",
        "取消订单",
        "取消订单",
        "删除记录",
        "删除记录",
      ],
      Conditions: [
        "等待接单中",
        "订单进行中",
        "对方已结单",
        "对方已结单",
        "订单已结束",
      ],
    };
  },
  methods: {
    redirectToPage(order_id) {
      this.$router.push({
        path: "/Details",
        query: {
          order_id: order_id,
        },
      });
    },
    handleButtonClick1(status, item_id) {
      if (status === 0) {
        this.completeOrder(item_id);
      } else if (status === 1) {
        this.completeOrder(item_id);
      } else if (status === 2) {
        this.completeOrder(item_id);
      } else {
        this.deleteOrder(item_id);
      }
    },
    handleButtonClick2(status, item_id) {
      if (status === 3 || status === 4) {
        this.deleteOrder(item_id);
      } else {
        this.cancelOrder(item_id);
      }
    },
    completeOrder(item_id) {
      this.dialogTableVisible = true;
      this.tmp = item_id;
      // 处理完成订单的逻辑
      const params = new URLSearchParams();
      params.append("order_id", item_id);
      params.append("user_id", this.id);
      this.axios
        .post("http://127.0.0.1:8000/complete_order/", params)
        .then((res) => {
          if (res.data.success) {
            console.log("Complete Success!");
            if (this.list == 0) {
              this.progressingOrder(this.id);
            } else if (this.list == 1) {
              this.publishedOrder(this.id);
            } else if (this.list == 2) {
              this.recievedOrder(this.id);
            }
          }
        })
        .catch((error) => {
          console.error(error); // 输出错误信息，以便调试
        });
      // console.log("完成订单", item_id);
    },
    modifyOrder(item_id) {
      // ！！！！！！
      // 处理修改订单的逻辑
      // 跟发布一样但带信息，修改此订单
      console.log("修改订单", item_id);
    },
    republicOrder(item_id) {
      // 处理重新发布订单的逻辑
      // 跟发布一样但带信息，重新发布订单
      console.log("重新发布", item_id);
    },
    cancelOrder(item_id) {
      // console.log("look:" + item_id);
      // 处理取消订单的逻辑
      const params = new URLSearchParams();
      params.append("order_id", item_id);
      this.axios
        .post("http://127.0.0.1:8000/cancel_order/", params)
        // 加：处理信誉分
        .then((res) => {
          if (res.data.success) {
            // console.log("Cancel Success!");
            if (this.list == 0) {
              this.progressingOrder(this.id);
            } else if (this.list == 1) {
              this.publishedOrder(this.id);
            } else if (this.list == 2) {
              this.recievedOrder(this.id);
            }
          }
        })
        .catch((error) => {
          console.error(error); // 输出错误信息，以便调试
        });
      // console.log("取消订单", item_id);
    },
    deleteOrder(item_id) {
      // 处理删除订单的逻辑
      const params = new URLSearchParams();
      params.append("order_id", item_id);
      this.axios
        .post("http://127.0.0.1:8000/delete_order/", params)
        .then((res) => {
          if (res.data.success) {
            // console.log("Delete Success!");
            // 只在订单记录有
            this.allOrder(this.id);
          }
        })
        .catch((error) => {
          console.error(error); // 输出错误信息，以便调试
        });
      // console.log("删除订单", item_id);
    },
    getCondition(condition) {
      return this.Conditions[condition];
    },
    getButtonLabel1(status) {
      return this.buttonLabels1[status];
    },
    getButtonLabel2(status) {
      return this.buttonLabels2[status];
    },
    progressingOrder(id) {
      const params = new URLSearchParams();
      params.append("user_id", id);
      this.axios
        .post("http://127.0.0.1:8000/progressing_orders_dict/", params)
        .then((res) => {
          if (res.data.success) {
            this.orderList = res.data.data;
            // this.visible = Array.from({ length: this.orderList }, () => false);
            this.list = 0;
            // console.log("此", this.id);
          }
        })
        .catch((error) => {
          console.error(error); // 输出错误信息，以便调试
        });
    },
    publishedOrder(id) {
      const params = new URLSearchParams();
      params.append("user_id", id);
      this.axios
        .post("http://127.0.0.1:8000/published_orders_dict/", params)
        .then((res) => {
          if (res.data.success) {
            this.orderList = res.data.data;
            // this.visible = Array.from({ length: this.orderList }, () => false);
            this.list = 1;
            // console.log(res.data.data);
            // console.log(this.orderList);
          }
        })
        .catch((error) => {
          console.error(error); // 输出错误信息，以便调试
        });
    },
    recievedOrder(id) {
      const params = new URLSearchParams();
      params.append("user_id", id);
      this.axios
        .post("http://127.0.0.1:8000/recieved_orders_dict/", params)
        .then((res) => {
          if (res.data.success) {
            this.orderList = res.data.data;
            this.list = 2;

            // console.log(this.orderList);
          }
        })
        .catch((error) => {
          console.error(error); // 输出错误信息，以便调试
        });
    },
    allOrder(id) {
      // console.log("看我！");
      const params = new URLSearchParams();
      params.append("user_id", id);
      this.axios
        .post("http://127.0.0.1:8000/all_orders_dict/", params)
        .then((res) => {
          if (res.data.success) {
            this.orderList = res.data.data;
            // this.visible = Array.from({ length: this.orderList }, () => false);
            this.list = 3;
            // console.log(res.data.data);
            // console.log(this.orderList);
          }
        })
        .catch((error) => {
          console.error(error); // 输出错误信息，以便调试
        });
    },
    requestAvatar() {
      this.axios.post("http://127.0.0.1:8000/userInfos/").then((res) => {
        if (res.data.success) {
          this.user_data = res.data.data;
        }
      });
    },
    getUserAvatar(customer_id) {
      for (let item of this.user_data) {
        if (item.id == customer_id) {
          return item.avatar;
        }
      }
    },
    infoRequst() {
      this.axios.post("http://127.0.0.1:8000/userInfo/").then((res) => {
        if (res.data.success) {
          // console.log(res.data.data[0].id);
          this.id = res.data.data[0].id;
          this.progressingOrder(this.id);
        }
      });
    },
    to() {
      this.dialogTableVisible = false;
      const params = new URLSearchParams();
      params.append("value1", this.value1);
      params.append("value2", this.value2);
      params.append("user_id", this.id);
      params.append("comment", this.comment);
      params.append("order_id", this.tmp);

      this.axios.post("http://127.0.0.1:8000/comment/", params).then((res) => {
        this.data = res.data.data;
        if (res.data.success) {
          ElMessage({
            message: "评论成功，感谢您参与评论~",
            type: "success",
          });
        }
      });
    },
  },
  mounted() {
    this.infoRequst();
    this.requestAvatar();
    //
  },
};
</script>

<style scoped>
.l-box-card {
  width: 100%;
  height: 64vh;
  overflow-y: scroll;
}

.s-box-card {
  width: 80%;
  margin-left: 10%;
  margin-top: 20px;
}

.condition {
  height: 20px;
  width: 80px;
  background-color: lavender;
  font-style: italic;
  font-size: 0.9em;
  /* 字号略小于h4 */
  margin-top: 0;
  margin-bottom: 10px;
}

.s-box-card {
  width: 60%;
  margin: 20px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  margin-left: 20%;
}

.el-card {
  --el-card-padding: none;
}

.s-box-card:hover {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6);
  /* 鼠标悬停时阴影加深 */
  cursor: pointer;
  /* 鼠标变为手型指示链接 */
}

.owner {
  display: flex;
  justify-content: space-between;
}

.top {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
  padding-top: 0;
  align-items: center;
}
.title:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 0 10px;
}
.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.price {
  font-size: 20px;
  font-weight: bold;
  color: rgb(255, 0, 0);
  margin-left: auto;
}

.divider {
  margin-top: 20px;
  height: 2px;
  background-color: #f0f0f0;
}

.bottom {
  background: linear-gradient(to right, #cdd2e8, #ffffff);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  color: gray;
}

.right {
  display: flex;
  justify-content: right;
}

.content {
  padding: 20px;
  padding-top: 0;
  padding-bottom: 0;
  color: #504b4b;
}

.ownerId {
  padding: 8px;
}

.Type {
  padding: 5px 15px;
  background-color: lavender;
  border-radius: 10px;
  font-size: small;
  margin-left: 15px;
  /* max-height: 25px; */
  flex-shrink: 0;
  text-align: center;
}

.rate {
  display: flex;
  justify-content: space-around;
  padding: 2px;
}
.rate span {
  font-size: 14px;
  vertical-align: middle;
  color: black;
}
.rate_item {
  display: flex;
  align-items: center;
}
</style>
